<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统登录</title>
    <link rel="icon" href="img/000.jpg" type="image/x-icon" />
</head>
<style>
    .div-form {
        font-family: 仿宋;
        position: fixed;
        left: 40%;
        top: 40%;
    }
    .div-form-item {
        padding: 10px;
    }

    label {
        color: #17a2b8;
    }

    button {
        margin-left: 35px;
        width: 60px;
        height: 30px;
        border-radius: 20px;
        outline: none;
        color: #f84ee1;
        background-color: #5fccff;
        border-width: 3px;
        border-color: #57e9f6;
        font-family: 方正粗黑宋简体;
        font-weight: bold;
    }

    .title {
        position: fixed;
        left: 42%;
        top: 10%;
        font-family: 仿宋;
        font-size: 60px;
        color: #1a1919;
    }

    input {
        border-radius: 30px;
        padding-left: 10px;
        outline: none;
    }

    #message {
        position: fixed;
        border: solid #b8a6a6 1px;
        border-radius: 10px;
        background-color: #676e73;
        top: 50%;
        left: 43%;
        width: 150px;
        height: 60px;
        align-items: center;
        padding-left: 5px;
        display: none;
        opacity: 0.95;
    }

    span {
        position: relative;
        top: -10px;
        color: #fd0000;
    }
    body{
        background: url("img/123.png");
        background-size: 100%;
    }
</style>
<body >
<div class="title">
    <p>登录界面</p>
</div>
<div class="div-form">
    <form id="login-form" method="post">
        <div class="div-form-item">
            <label>帐号：</label>
            <input name="account">
        </div>
        <div class="div-form-item">
            <label>密码：</label>
            <input name="password" type="password">
        </div>
        <div class="div-form-item">
            <button type="button" id="login-btn">登录</button>
            <button type="reset">重置</button>
        </div>
    </form>
</div>
<div id="message">
    <p><img src="img/123.png" width="30px"><span id="message-span"></span></p>
</div>
<script src="bootstrap/jquery3.6.js"></script>
<script>
    $("#login-btn").click(function () {
        ajax();
    });
    $(document).keydown(function(event){
        if(event.keyCode==13){
            ajax()
        }
    });
    function ajax(){
        $.ajax({
            type: "post",
            url: "LoginController/login",
            data: $("#login-form").serialize(),
            dataType: "json",
            success: function (json) {
                if (json.message == "成功") {
                    location.href = "buba/index.html";
                } else {
                    $("#message-span").text(json.message);
                    $("#message").fadeToggle(500, f);
                }
            }
        });
    }
    function f() {
        setTimeout(function () {
            $("#message").fadeToggle(500);
        }, 1000);
    }
</script>
</body>
</html>